<!--
    *名称：弹窗的搜索条件组件
    *功能：methods
      1.点击搜索的方法：@search
      2.搜索条件 props : formItemList
-->

<template>
  <div class="dialog-search">
    <el-form
      :inline="true"
      ref="ruleForm"
      :model="formInline"
      class="demo-form-inline"
    >
      <el-form-item
        v-for="(item, index) in formItemList"
        :key="index"
        :label="item.formLabel"
      >
        <!-- 下拉选择框 -->
        <el-select
          v-if="item.type == 'select'"
          v-model="formInline[item.param]"
          :multiple="item.multiple"
          :placeholder="item.placeholder ? item.placeholder : '请选择'"
          size="small"
          clearable
        >
          <el-option
            v-for="(item2, index2) in item.selectOptions"
            :key="index2"
            :label="item2.label"
            :value="item2.value"
          ></el-option>
        </el-select>
        <!-- 下拉选择框end -->
        <!-- 输入框 -->
        <el-input
          v-if="item.type == 'input'"
          v-model="formInline[item.param]"
          size="small"
          :placeholder="item.placeholder ? item.placeholder : '请输入'"
          clearable
        ></el-input>
        <!-- 输入框 -->
        <!-- 日期范围选择框 -->
        <el-date-picker
          v-if="
            item.type == 'daterange' ||
              item.type == 'datetimerange' ||
              item.type == 'date' ||
              item.type == 'datetime'
          "
          v-model="formInline[item.param]"
          :value-format="item.valueFormat || 'timestamp'"
          :format="item.format || 'yyyy-MM-dd'"
          clearable
          :type="item.type || ''"
          :range-separator="item.rangeSeparator || '至'"
          :start-placeholder="item.startPlaceholder"
          :end-placeholder="item.endPlaceholder"
          :placeholder="item.placeholder ? item.placeholder : '请选择'"
          :default-time="item.defaultTime || ['00:00:00', '23:59:59']"
          size="small"
        >
        </el-date-picker>
        <!-- 日期范围选择框end -->
        <!-- 级联选择器 -->
        <el-cascader
          v-if="item.type == 'cascader'"
          v-model="formInline[item.param]"
          size="small"
          :options="item.options"
          :props="item.props"
          clearable
        ></el-cascader>
        <!-- 级联选择器end -->
      </el-form-item>
      <slot name="formItem"></slot>

<!--      <el-form-item style="width:10rem">-->
      <el-form-item>
        <el-button type="primary" size="small" @click="onSubmit">查询</el-button>
        <el-button type="" size="small" @click="resetForm('ruleForm')"
        >重置</el-button>
      </el-form-item>

      <!-- 可用于显示其他按钮 -->
      <slot name="formButton"></slot>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "BaseSearch",
  props: {
    emitSearch: {
      // 是否立即执行搜索
      type: Boolean,
      default: false
    },
    formItemList: {
      type: Array,
      default() {
        return [
          {
            label: "下拉框",
            type: "select",
            selectOptions: [{ text: 111, value: 111 }],
            param: "company",
            defaultSelect: "222", // 下拉框默认选中项
            multiple: false
          },
          {
            label: "输入框",
            type: "input",
            param: "name"
          },
          {
            label: "日期范围",
            type: "daterange",
            param: "createtime"
          },
          {
            label: "级联选择器",
            type: "cascader",
            param: "cascader",
            options:[],
            props:{ multiple: false }
          }
        ];
      }
    }
  },
  data() {
    let formInline = {};
    for (const obj of this.formItemList) {
      formInline[obj.param] = obj.defaultSelect || "";
    }
    return {
      formInline
    };
  },
  watch: {
    emitSearch(newVal, oldVal) {
      // 是否立即触发搜索  用在弹窗中异步请求下拉框后  或者给下拉框赋值默认值后  需要用到这个方法
      if (newVal) {
        console.log("此时触发--立即执行搜索");
        this.$emit("search", this.formInline);
      }
    },
    formItemList: {
      handler(newVal, oldVal) {
        for (const obj of this.formItemList) {
          if (obj.defaultSelect) {
            formInline[obj.param] = obj.defaultSelect;
          }
        }
      },
      deep: true
    }
  },
  methods: {
    onSubmit() {
      // console.log('submit!',this.formInline);
      this.$emit("search", this.formInline);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      let formInline = {};
      for (const obj of this.formItemList) {
        // formInline[obj.param] = obj.defaultSelect || "";  // 重置时下拉框的默认值如果要保留就选用这个
        formInline[obj.param] = ""; // 所有筛选条件清空
      }
      this.formInline = formInline;

      this.$emit("search", this.formInline);
    }
  }
};
</script>

<style lang="less" scoped>
.dialog-search {
  // margin: 0 1rem;
  text-align: left;
  /deep/ .el-form-item__content {
    // width: 16rem;
    .el-input {
      width: 16rem;
    }
    .el-select {
      .el-input__inner {
        // height: 3.2rem;
        width: 16rem;
      }
    }
  }
}
</style>
